<template>
  <div class="register-wrapper padding-12">
    <div class="register-body">
      <div class="register-form-wrap">
        <van-cell-group :border="false">
          <van-field
            v-model="userPhone"
            type="tel"
            label="+86"
            placeholder="手机号码"
            maxlength="11"
            :error="phoneError"
            :error-message="phoneErrorMsg"
            @blur="phoneBlur"
          />
          <van-field
            v-model="password"
            :type="passwordType"
            placeholder="密码"
            :error="passwordError"
            :error-message="passwordErrorMsg"
            @blur="passwordBlur"
          >
            <template slot="right-icon">
                <div class="close-password-icon" @click="changePasswordType" v-if="isShowPassword">
                  <img src="/static/images/close-password-icon.png">
                </div>
                <div class="see-password-icon" @click="changePasswordType" v-if="!isShowPassword">
                  <img src="/static/images/see-password-icon.png">
                </div>
            </template>
          </van-field>
          <van-cell></van-cell>
        </van-cell-group>
        <div class="register-btn">
          <van-button size="large" round class="register-submit-btn" @click="submit">登录</van-button>
        </div>
        <div class="clearfix" style="margin-top: 10px;padding: 0 12px">
            <p class="register-txt fl">
                <router-link to="/register" class="register-login-font">我要注册</router-link>
            </p>
            <div class="forget-pwd-div text-align-r fr">
                <router-link to="/forget-password">忘记密码？</router-link>
            </div>
        </div>
      </div>
    </div>
    <div class="register-footer">
      <van-row type="flex" justify="space-between">
        <van-col span="4" class="register-foot-line"></van-col>
        <van-col span="16" class="text-align-c">
          <router-link to="/index">跳过，随便看看</router-link>
        </van-col>
        <van-col span="4" class="register-foot-line"></van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
  import Cookie from 'js-cookie'
  import ajax from '../../module/ajax/public'
  import { getInfo } from '../../module/ajax/getUserInfo'
  import {Field, Icon, Button, Checkbox, Cell, CellGroup, Row, Col,Notify} from 'vant'

  export default {
    name: 'Login',
    components: {
      [Field.name]: Field,
      [Icon.name]: Icon,
      [Button.name]: Button,
      [Checkbox.name]: Checkbox,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Row.name]: Row,
      [Col.name]: Col
    },
    data () {
      return {
        userInfo: null,
        userPhone: '',
        phoneError: false,
        phoneErrorMsg: '',
        password: '',
        passwordError: false,
        passwordErrorMsg: '',
        passwordType:'password',
        isShowPassword:true
      }
    },
    methods: {
      phoneBlur () {
        if (this.userPhone !== '') {
          if (!(/^1[3456789]\d{9}$/.test(this.userPhone))) {
            this.phoneErrorMsg = '手机号格式错误'
            this.phoneError = true
            return false
          } else {
            this.phoneErrorMsg = ''
            this.phoneError = false
            return true
          }
        } else {
          this.phoneErrorMsg = ''
          this.phoneError = true
          return false
        }
      },
      // 密码验证
      passwordBlur () {
        if (this.password !== '') {
          if (!(/^(\w){3,20}$/.test(this.password))) {
            this.passwordErrorMsg = '密码格式错误'
            this.passwordError = true
            return false
          } else {
            this.passwordErrorMsg = ''
            this.passwordError = false
            return true
          }
        } else {
          this.passwordErrorMsg = ''
          this.passwordError = true
          return false
        }
      },
      changePasswordType(){
        this.isShowPassword = !this.isShowPassword
        if(this.isShowPassword){
          this.passwordType = 'password'
        }else{
          this.passwordType = 'text'
        }
      },
      submit () {
        if (!this.phoneBlur()) {
          return
        }
        if (!this.passwordBlur()) {
          return
        }
        var userInfo = Cookie.get('userInfo')
        var user = JSON.parse(userInfo || '{}')
        let postData = {
          username: this.userPhone,
          password: this.password
        }
        if (user.avatar) postData.avatar = user.avatar
        if (user.openid) postData.openid = user.openid
        if (user.gender) postData.gender = user.gender
        if (user.nickname) postData.nickname = user.nickname
        ajax.doAction({
          url: '/login',
          type: 'POST',
          items: postData,

          successCallback: (data) => {
            // console.log(data)
            if (data.code !== 200) {
              Notify({
                message: data.msg,
                duration: 1000
              })
              return
            }

            Notify({
              message: data.msg,
              duration: 1000,
              background:'#0085ca'
            })
            Cookie.set('token', data.data.access_token, {expires: this.GLOBAL.CookieExpired})
            getInfo()
            let backRedirectUrl = Cookie.get('backRedirectUrl') || '/index'
            setTimeout(()=>{
              let userInfoJson = JSON.parse(Cookie.get('userInfo'))
              // console.log(userInfoJson)
              if (userInfoJson.province <= 0 || userInfoJson.province === 'undefined') {
                this.$router.push('/base-info')
              } else {
                this.$router.push(backRedirectUrl)
              }
            },1000)
          },
          errorCallback: (data) => {
            console.log('请求失败')
          }
        })
      }
    }
  }
</script>
<style>
.register-wrapper .forget-pwd-div a{
  font-size: 15px;
  color: #888;
}
</style>
